
<template>
    <el-dialog :title="title" v-model="visible" append-to-body :lock-scroll="true" center
        custom-class="RegularPop photoChoosePop">
        <div class="photo-content">
            <el-form :model="form" ref="ruleFormRef" :inline="true">
                <el-form-item label="相册选择：">
                    <el-select v-model="form.imageVal" placeholder="请选择相册" clearable @change="groupChange">
                        <el-option v-for="item in group" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="image__lazy">
                <ul v-if="urls.length != 0">
                    <li v-for="(item, i) in urls" :key="i" :class="i == index ? 'select' : ''">
                        <span class="checkBox" @click="selectImg(item, i)"></span>
                        <el-image :src="item.url" :title="item.originalName" :preview-src-list="getImgList(i)"
                            fit="fill" lazy />
                    </li>
                </ul>
                <ul v-else>
                    <p>此相册暂无数据！</p>
                </ul>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { listOss } from '@/api/system/oss'
import { articleGroupDic } from '@/api/CMS/article'
const { proxy } = getCurrentInstance();
const title = ref('')
const visible = ref(false);
const checked = ref(false)
const index = ref(undefined)//是否选中
const id = ref('')
const data = reactive({
    form: {
        imageVal: '1'
    },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupId: ''
    },
    urls: [
    ],
    group: [],
    picInfo: {}
})
const { form, urls, queryParams, group, picInfo } = toRefs(data);
function getGroupDic() {
    articleGroupDic().then(res => {
        //  console.log('获取相册', res)
        group.value = res.data;
        queryParams.value.groupId = form.value.imageVal
        listOss(queryParams.value).then(res => {
            urls.value = res.rows
        })
    })
}

/** 取消按钮 */
function cancel() {
    visible.value = false;
    reset();
};
/** 重置操作表单 */
function reset() {
    form.value = {
    };
    queryParams.value = {}
    proxy.resetForm("ruleFormRef");
}
// 显示弹框
function photo(i) {
    reset();
    form.value.imageVal = 1 + ''
    getGroupDic();
    visible.value = true;
    id.value = i;
    picInfo.value = {}
    title.value = "从相册选择展示主图";

}
function getImgList(index) {
    let arr = []
    let i = 0;
    for (i; i < urls.value.length; i++) {
        arr.push(urls.value[i + index].url)
        if (i + index >= urls.value.length - 1) {
            index = 0 - (i + 1);
        }
    }
    return arr;

}
function selectImg(item, i) {
    // console.log("选中", item, i)
    index.value = i;
    picInfo.value = item
}
function groupChange(i) {
    // console.log('dddd', i)
    queryParams.value.groupId = i;
    urls.value = []
    listOss(queryParams.value).then(res => {
        urls.value = res.rows;
    })
}
const emit = defineEmits(['isChoose'])
function submit() {
    let files = {};
    files.id = id.value;
    files.images = picInfo.value;
    // console.log('files-----', Object.keys(files.images).length)
    //Object.keys(obj).length
    if (Object.keys(files.images).length != 0) {
        emit('isChoose', files)
    }
    reset();
    index.value = undefined;
    visible.value = false;
}
//getGroupDic()
defineExpose({
    photo
});
</script>


